import React from 'react'
import {
    Form,
    Button,
    message,
    Switch,
    Card,
    Icon,
    Input,
    InputNumber,
    Popconfirm,
} from 'antd'
import { observer, inject } from 'mobx-react'
import _ from 'lodash'
import util from '../../../common/util'

import StandTable from './standTable'

const FormItem = Form.Item

@inject("store")
@observer
class StandMap extends React.Component {
    constructor() {
        super()
    }
    render() {
        let {form,store,id} = this.props
        let actions=store.actions
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 3 },
            },
            wrapperCol: {
                sm: { span: 20 },
            },
        };
        const tailAddFormItemLayout = {
            wrapperCol: {
                sm: {
                    span:20,
                    offset: 3,
                },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                sm: {
                    span: 8,
                    offset: 4,
                },
            },
        };
        return (
            <div >
                <FormItem
                    {...formItemLayout}
                    label="展位管理"
                >
                    {
                        store.halls.map((hall,index)=><div style={{border:"1px solid #d9d9d9",padding:'15px',borderRadius:'8px',marginBottom:'10px'}}>
                            <FormItem
                                {...formItemLayout}
                                label="展馆名"
                            >
                                {getFieldDecorator(`halls[${hall.key}].name`, {
                                    initialValue:hall.name,
                                    validateTrigger: ['onChange', 'onBlur'],
                                    rules: [{ required: true,whitespace:true, message: '展馆名不能为空' },
                                        {max:80,message:'展馆名不得超过80字'}],
                                })(
                                    <Input style={{width:'50%'}}/>
                                )}
                                {getFieldDecorator(`halls[${hall.key}].id`, {
                                    initialValue:hall.id,
                                })(
                                    <span></span>
                                )}
                                {
                                    store.halls.length>1&&(id==-1?<Button onClick={()=>actions.delHall(index)} style={{float:'right'}}>删除展馆</Button>:
                                        <Popconfirm
                                            title="删除展馆会导致该展馆下所有参展商的展位信息失效，确认删除展馆吗?"
                                            onConfirm={()=>actions.delHall(index)}
                                        >
                                            <Button  style={{float:'right'}}>删除展馆</Button>
                                        </Popconfirm>)
                                }
                            </FormItem>
                            <FormItem
                                {...formItemLayout}
                                label="展区设置"
                            >
                                {
                                    <StandTable key1={hall.key} data={hall.areas} form={form}/>
                                }
                                {hall.areas.length < 60 &&
                                <Button type="dashed" onClick={() => actions.addRow(hall)}
                                        style={{width: '100%',marginTop:'12px'}}>
                                    <Icon type="plus"/> 继续添加
                                </Button>
                                }
                            </FormItem>
                        </div>)
                    }
                    {store.halls.length<20&&
                    <Button type="dashed" onClick={()=>actions.addHall()} style={{width:'100%'}}>
                        <Icon type="plus" /> 添加展馆
                    </Button>
                    }
                </FormItem>

            </div>
        )
    }
}

export default StandMap

